<template>
  <div class="settings-root">
    <h2>设置</h2>
    <div class="section">
      <div class="section-title">主题模式</div>
      <div class="theme-switch">
        <label>
          <input type="radio" value="light" v-model="theme" /> 浅色
        </label>
        <label>
          <input type="radio" value="dark" v-model="theme" /> 深色
        </label>
      </div>
    </div>
    <div class="section">
      <div class="section-title">关于</div>
      <div>Win11 Web 仿真系统<br/>版本 1.0<br/>© 2024</div>
    </div>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'
const theme = ref(localStorage.getItem('theme') || 'light')
watch(theme, val => {
  document.documentElement.setAttribute('data-theme', val)
  localStorage.setItem('theme', val)
})
document.documentElement.setAttribute('data-theme', theme.value)
</script>
<style scoped>
.settings-root { padding: 24px; min-width: 400px; font-family: 'Segoe UI', system-ui, sans-serif; }
.section { margin-bottom: 32px; }
.section-title { font-weight: bold; margin-bottom: 8px; }
.theme-switch label { margin-right: 24px; font-size: 1.1em; }
input[type="radio"] { margin-right: 6px; }
:deep([data-theme="dark"]) .settings-root { background: #222; color: #eee; }
:deep([data-theme="light"]) .settings-root { background: #fff; color: #222; }
</style> 